<template>
  <button @click="hello">21</button>
  <h3>{{name}}</h3>
  <h3>age{{age}}</h3>
  <h2>{{obj.a.b.c}}</h2>
  <button @click="changeInfo">change info</button>
  <h1 v-show='person.hobby'>{{person.hobby}}</h1>
  <button @click="addHobby">add hobby</button>

  <hello-world say="我是子组件"/>
  <button @click.stop="changeCom">change component</button>
  <hook-practice v-if="obj.isShow"/>
  <!-- toRefs练习 -->
  <br/>
  <to-refs/>
</template>

<script>
import { ref, reactive } from 'vue'
import HelloWorld from '@/components/HelloWorld'
// import HookPractice from '@/components/HookPractice' //静态引入
import { defineAsyncComponent } from 'vue'
const HookPractice = defineAsyncComponent(() => import('@/components/HelloWorld'))
export default {
  name: 'App',
  setup() {
    let name = ref('Durant')
    let age = ref(32)

    const obj = reactive({
      isShow: true,
      a: {
        b: {
          c: 1
        }
      }
    })

    const person = reactive({
      name: 'durant',
      age: 32
    })

    const hello = () => {
      alert(`我的名字是${name.value},我的年龄是${age.value}`)
    }

    const changeInfo = () => {
      name.value = 'curry',
      console.log(age)
      age.value = 18

      obj.a.b.c ++
    }
    const addHobby = () => {
      person.hobby = 'basketball'
      
    }
    const changeCom = () => {
      obj.isShow = !obj.isShow
    }
    
    return {
      name,
      age,
      hello,
      changeInfo,
      obj,
      person,
      addHobby,
      changeCom
    }
  },
  components: {
    HelloWorld,
    HookPractice,
    ToRefs
  }
}
</script>